import { useTranslation } from 'react-i18next'
import { Link, useNavigate } from "react-router-dom";
import HeaderTitle from "../login/header";
import style from "./index.module.less"
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons"
import React, { Fragment, useState ,useEffect} from 'react'
import {
    Form,
    Input,
    Checkbox,
    Button,
    Toast,

} from 'antd-mobile'
import { login,reset_login_password } from "@/apis/user.js"

import money1 from '../../static/icon_transfer_top.png'
import eye from '../../static/eye.png'
import eyeo from '../../static/eye-o.png'

const TIME = 60000; //定义时效性


const DongTai = (props) => {
	const { t } = useTranslation();
    const navigate = useNavigate()
    const [active, serActive] = useState(1);
    const [visible, setVisible] = useState(false)
    const [visible1, setVisible1] = useState(false)
    const [visible2, setVisible2] = useState(false)
    const [formData, setFormData] = useState({ name: '', password: '', checked: false })
    const [form] = Form.useForm()

    const [oldpass, setOldpass] = useState('')
    const [newpass, setNewpass] = useState('')
    const [newpass2, setNewpass2] = useState('')

    useEffect(() => {
		setTimeout(()=>{
			if (window.scrollTo) {
				window.scrollTo(0, 0);
			} else if (document.body.scrollTop) {
				document.body.scrollTop = 0;
			} else {
				document.documentElement.scrollTop = 0;
			}
            document.getElementById('root').scrollIntoView(true);
            document.getElementById('body').scrollIntoView(true);
		},0)
		return ()=>{console.log('初始化----我的消息')}
	}, []);
    // 查看缓存中是否有账号密码
    console.log(visible, '这个是啥---')
    console.log(form, '这个是啥---')
    let formDataMemo = {}
    // if (localStorage.getItem('formData')) {
    //     formDataMemo = JSON.parse(localStorage.getItem('formData'))
    // }

    // if (formDataMemo.name && formDataMemo.password && formDataMemo.expirationTime && Date.now() < formDataMemo.expirationTime) {
    //     setFormData({
    //         name: formDataMemo.name,
    //         password: formDataMemo.password,
    //         checked: true,
    //     })

    //     console.log(formData, 'formData')
    // }

    // const onFinish = (values) => {
    //     console.log(values, 'values')
    //     /*
    //         1.调用登录接口
    //         2.登录成功之后，看其是否勾选了记住密码，如果记住密码则将账号密码缓存在内存中
    //         3.下次进入秘密
    //     */
    //     login(values).then(res => {
    //         if (res.code == 200) {
    //             Toast.show({
    //                 icon: 'success',
    //                 content:this.t('modifypassword.title1'),
    //             })

    //             // 如果设置了记住密码，则在登录后将账号密码存储在cookie或storage中，并设置时效性以此来记住密码
    //             if (formData.checked) {
    //                 localStorage.setItem('formData', JSON.stringify({
    //                     ...values,
    //                     expirationTime: Date.now() + TIME,
    //                 }));
    //             } else {
    //                 localStorage.removeItem('formData')
    //             }
    //         } else {
    //             Toast.show({
    //                 icon: 'fail',
    //                 content: this.t('modifypassword.title2'),
    //             })

    //         }
    //     })

    // };

    // const onFinishFailed = (errorInfo) => {
    //     console.log('Failed:', errorInfo);
    // };
    const changeTab = (current) => {
        if (!oldpass || !newpass || !newpass2) {
            Toast.show({
                content:t('modifypassword.title3'),
            })
            return
        }
        if(newpass  != newpass2){
            Toast.show({
                content:t('modifypassword.title4'),
            })
            return
        }
        
        reset_login_password({old_password:oldpass,password:newpass,password_confirmation:newpass2}).then(res => {
            if (res.status.errorCode == 0) {
                Toast.show({
                 //   icon: 'success',
                    content:  res.status.msg || t('modifypassword.title5'),
					duration:1500
                })
				setTimeout(function(){window.history.back()},1500)
            } else {
                Toast.show({
                  //  icon: 'fail',
                    content:res.status.msg ||  t('modifypassword.title6'),
                })

            }
        })
    }

    const items = [
        { id: 1, label: t('modifypassword.title7'), amount: '0.00' },
        { id: 2, label: t('modifypassword.title8'), amount: '7.00' },
        { id: 3, label: t('modifypassword.title9'), amount: '5.00' },
        // Add more items as needed
    ];


    return (
        <React.Fragment>
            <HeaderTitle title={t('modifypassword.title10')} right_title={t('agent.title2')} />
            <div className={style['login_box']}>


                <div className={`${style['tabs']}`} onClick={() => {
                    changeTab(1)
                }} style={{ letterSpacing: '2px' }}>
                    {t('modifypassword.title11')}
                </div>



                <div className={style['item-block']}>

                    <div className={style['item']}>
                        <div style={{ fontSize: '12px' }} className='i1'>
                            <Input  onChange={(e)=>{setOldpass(e)}}  type={visible?'text':'password'} placeholder={t('modifypassword.title12')} />
                        </div>
                        <div className={style['flex']}>
                            <div className={style['flex']}>
                                <img src={visible?eyeo:eye} onClick={() => {
                    setVisible(!visible)
                }} alt="" style={{ width: '30px', marginRight: '10px' }} />
                            </div>
                        </div>
                    </div>
                    <div className={style['item']}>
                        <div style={{ fontSize: '12px' }} className='i1'>
                            <Input  type={visible1?'text':'password'} onChange={(e)=>{setNewpass(e)}} placeholder={t('modifypassword.title13')} />
                        </div>
                        <div className={style['flex']}>
                            <div className={style['flex']}>
                                <img src={visible1?eyeo:eye} onClick={() => {
                    setVisible1(!visible1)
                }} alt="" style={{ width: '30px', marginRight: '10px' }} />
                            </div>
                        </div>
                    </div>
                    <div className={style['item']} style={{marginBottom:'20px'}}>
                        <div style={{ fontSize: '12px' }} className='i1'>
                            <Input  type={visible2?'text':'password'} placeholder={t('modifypassword.title14')} onChange={(e)=>{setNewpass2(e)}} />
                        </div>
                        <div className={style['flex']}>
                            <div className={style['flex']}>
                                <img src={visible2?eyeo:eye} onClick={() => {
                    setVisible2(!visible2)
                }} alt="" style={{ width: '30px', marginRight: '10px' }} />
                            </div>
                        </div>
                    </div>

                </div>

                <div className={style['flex-center']}>
                    
                <div className={`${style['submit']}`} onClick={() => {
                    changeTab(1)
                }} style={{ letterSpacing: '2px' }}>
                    {t('modifypassword.title15')}
                </div>
                </div>


            </div>


        </React.Fragment>


    )
}


export default DongTai
